<template>
  <div class="detail">
    <el-dialog
      title="广告"
      :visible.sync="visible"
      width="65%"
      @close="handleClose"
    >
      <div class="content">
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          label-width="150px"
          :inline="false"
          size="mini"
        >
          <el-row :gutter="30">
            <el-col :span="10">
              <el-form-item label="广告名称" prop="name">
                <el-input v-model="form.name" placeholder="广告名称" />
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="备注" prop="note">
                <el-input v-model="form.note" placeholder="备注" />
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="排序" prop="sort">
                <el-input v-model="form.sort" placeholder="排序" />
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="产量数量" prop="productCount">
                <el-input v-model="form.productCount" placeholder="产量数量" />
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="链接" prop="url">
                <el-input v-model="form.url" placeholder="链接" />
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="首页轮播位置" prop="type">
                <el-select
                  v-model="form.type"
                  placeholder="轮播位置"
                  clearable
                  filterable
                  style="width: 100%"
                >
                  <el-option label="app首页轮播" :value="0" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="开始时间" prop="startTime">
                <el-date-picker
                  v-model="form.startTime"
                  type="datetime"
                  placeholder="开始时间"
                />
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="结束时间" prop="endTime">
                <el-date-picker
                  v-model="form.endTime"
                  type="datetime"
                  placeholder="结束时间"
                />
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="上下线状态" prop="status">
                <el-switch
                  v-model="form.status"
                  :active-value="1"
                  :inactive-value="0"
                />
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="图片">
                <el-upload
                  ref="upload"
                  action="http://leju.bufan.cloud/lejuAdmin/material/uploadFileOss"
                  :headers="token"
                  :show-file-list="false"
                  :on-success="handlePicUpload"
                >
                  <img
                    v-if="form.pic"
                    :src="form.pic"
                    alt=""
                    srcset=""
                    class="pic"
                  >
                  <i v-else class="el-icon-plus uploader-icon" />
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <span slot="footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button
          type="primary"
          :loading="loading"
          @click="handleConfirm"
        >确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { addAds, updateAds } from '@/api/market/advertisement/index'
import { getToken } from '@/utils/auth'
import { parseTime } from '@/utils/index'
export default {
  data() {
    return {
      visible: false,
      loading: false,
      form: {
        pic: ''
      },
      rules: {
        name: [{ required: true, message: '请输入广告名称', trigger: 'blur' }]
      }
    }
  },
  computed: {
    token() {
      return { token: getToken() }
    }
  },
  methods: {
    // 显示
    open(info) {
      if (info) {
        this.form = {
          ...info
        }
      }
      this.visible = true
    },
    handlePicUpload(res) {
      this.form.pic = res.data.fileUrl
    },
    // 提交
    handleConfirm() {
      this.$refs.form.validate(async(valid) => {
        if (valid) {
          this.loading = true
          const formObj = {
            ...this.form,
            startTime: parseTime(this.form.startTime),
            endTime: parseTime(this.form.endTime)
          }
          let ajaxApi = addAds
          if (this.form.id) {
            ajaxApi = updateAds
          }
          const { success, message } = await ajaxApi(formObj)
          if (success) {
            this.$message.success('保存成功')
            this.visible = false
            // 刷新界面
            this.$parent.getAdsList()
          } else {
            this.$message.error(message)
          }
          this.loading = false
        }
      })
    },
    // 关闭
    handleClose() {}
  }
}
</script>
<style lang="scss" scope>
.detail {
  .pic,
  .uploader-icon {
    width: 178px;
    height: 178px;
    font-size: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
